<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <a4j:outputPanel style="overflow: hidden;"
                     layout="block"
                     id="#{matchDetailPanelID}">

        <rich:panel style="overflow: hidden;"
                    rendered="#{not empty match}" >

            <f:facet name="header" >
                <h:panelGroup style="overflow: hidden;">
                    <h:outputText value="#{bundle.matchDetailPanelTitle}" />
                    <a4j:commandButton image="/resources/icons/application-exit-icon.png" 
                                       execute="@this" render="#{matchDetailPanelID}"
                                       value="" styleClass="detailPanelCloseButton" >
                        <f:setPropertyActionListener target="#{matchManagedBean.currentlyDetailedMatch}" value="#{null}" /> 
                    </a4j:commandButton>
                </h:panelGroup>
            </f:facet>

            <div style="text-align: center; margin: 10px; font-size: 110%;" >
                <h:outputText value="#{match.stadiumName}" /> - 
                <h:outputText value="#{match.matchDate}" >
                    <f:convertDateTime type="date"  dateStyle="full" />
                </h:outputText> - 
                <h:outputText value="#{match.matchDate}" >
                    <f:convertDateTime type="time" timeStyle="short" />
                </h:outputText>
            </div>

            <h:panelGrid columns="3" id="matchSummaryTable" style="width: 100%;"
                         columnClasses="matchSummaryTableItem homeTeamSummaryItem, 
                         matchSummaryTableItem scoreSummaryItem,
                         matchSummaryTableItem awayTeamSummaryItem" >
                <h:panelGroup layout="block" >

                    <h:outputText style="font-size: large;" 
                                  value="#{match.homeTeam.name}" /> 
                    <br />

                    <a4j:repeat value="#{match.homeTeamGoals}" var="goal" >
                        <h:outputText value="#{goal.player.lastName} #{goal.scoreTime}" /> 
                        <br />
                    </a4j:repeat>

                </h:panelGroup>

                <h:panelGroup layout="block">

                    <h:outputText style="margin: 10px;"
                                  value="#{match.homeTeamGoals.size()} : #{match.awayTeamGoals.size()}" />

                </h:panelGroup>

                <h:panelGroup layout="block" >

                    <h:outputText style="font-size: large;"
                                  value="#{match.awayTeam.name}" />
                    <br />    

                    <a4j:repeat value="#{match.awayTeamGoals}" var="goal" >
                        <h:outputText value="#{goal.player.lastName} #{goal.scoreTime}" />
                        <br />
                    </a4j:repeat>

                </h:panelGroup>
            </h:panelGrid>

        </rich:panel>

    </a4j:outputPanel>

</ui:composition>